/* 学习目标：使用Redux管理数据， 组件卸载数据不丢失  */
import { useEffect, useState } from 'react';
import store from './store';

export default function App() {
  const [show, setShow] = useState(true);
  return (
    <div>
      <h1>Redux基础案例</h1>
      <button onClick={() => setShow(!show)}>点击切换卸载挂载</button>
      {show && <Son />}
    </div>
  );
}

function Son() {
  // 💥💥Redux和React的关系：
  // Redux中的state 只是普通的JS数据，不会驱动变化
  // React中state，才会驱动视图变化

  // 1. 从redux中取出数据，作为初始值
  const state = store.getState();
  const [count, setCount] = useState(state.count);

  useEffect(() => {
    // 3. 开启监听store中数据的变化， 实时同步到React的state中
    store.subscribe(() => {
      setCount(store.getState().count);
    });
  }, []);

  return (
    <div>
      <h2>子组件</h2>
      <h2>count:{count}</h2>
      {/* 2. click事件修改redux中的数据 */}
      <button onClick={() => store.dispatch({ type: 'add' })}>+1</button>
      <button onClick={() => store.dispatch({ type: 'des' })}>-1</button>
    </div>
  );
}
